
<div class="container" style="width:610px; height:600px; margin:0 0 0 30px; padding:10px; background-color:#fff;">
  <form id="upload-form" name="upload-form" enctype="multipart/form-data" method="post" action="<?php echo $this->base; ?>/images/axUpload">
    <table cellpadding="8" cellspacing="0" border="0" style="margin-top:10px; font-size:15px; font-family: Helvetica; color:#58595B;">
      <tr>
        <td width="125" style="font-weight:bold;"><?php __('UPLOAD SLIDE'); ?>:</td>
        <td>
          <input type="file" id="uploadImage" name="uploadImage" onchange="doUploadImage()" />
          <div id="uploadBar" class="uploadBar" style="display:none;"></div>
          <div id="messageBox" class="boxError" style="display:none;"></div>
        </td>
      </tr>
    </table>
  </form>
  <form id="edit-photo-form" action="<?php e($this->base); ?>/images/updateURL" method="post" style="width:610px; height:530px; overflow:auto; margin-top:10px;">
      <div id="edit-photo"><?php if (isset($data) && count($data)>0) {
      foreach ($data as $d) { ?>
        <div id="photo-<?php e($d['Image']['id']); ?>" style="width:181px; margin:0 8px 8px; float:left;">
          <img src="<?php e($this->base); ?>/img/slides/s_<?php e($d['Image']['filename']); ?>" />
          <div style="border:1px solid #ccc; padding:3px; margin-top:2px;">
            URL: <input type="text" name="url_<?php e($d['Image']['id']); ?>" value="<?php e($d['Image']['description']); ?>" style="width:130px;" /><br />
            <label><input type="checkbox" id="delete_<?php e($d['Image']['id']); ?>" onclick="deleteImg(<?php e($d['Image']['id']); ?>)" /> <?php __('Delete this photo.'); ?></label>
          </div>
        </div>
<?php }
    } ?>
      </div>
      <div style="clear:both;"></div>
      <center><input type="submit" value="Save" /></center>
  </form>
</div>
<div style="clear:both;"></div>
<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
var _template = '<div id="photo-{id}" style="width:181px; margin:0 8px 8px; float:left; display:none;">' +
                  '<img src="<?php e($this->base); ?>/img/slides/{thumb}" />' +
                  '<div style="border:1px solid #ccc; padding:3px; margin-top:2px;">' +
                    'URL: <input type="text" name="url_{id}" style="width:130px;" /><br />' +
                    '<label><input type="checkbox" id="delete_{id}" onclick="deleteImg({id})" /> <?php __('Delete this slide.'); ?></label>' +
                  '</div>'
                '</div>';
var _confirm  = '<?php __('Are you sure you want to delete this slide?'); ?>';
var _filename = '';

function init () {
    _template = new Ext.Template(_template);
} // init

function doUploadImage () {
    var errorMesg = '<h4>Please select an image from your computer.</h4>';
    var mesgBox   = Ext.get('messageBox');

    if (!Ext.fly('uploadImage').getValue()) {
        mesgBox.update(errorMesg);
        Ext.fly('uploadImage').highlight().focus();
        return false;
    } else if (mesgBox.isVisible()) {
        mesgBox.fadeOut({
            easing: 'easeOut',
            useDisplay: true
        });
    }

    Ext.fly('uploadImage').setStyle({  display:'none' });
    Ext.fly('uploadBar').fadeIn();

    if (_filename == Ext.fly('uploadImage').getValue()) {
        return false;
    } else {
        _filename = Ext.fly('uploadImage').getValue();
    }

    AIM.submit(Ext.fly('upload-form').dom, { 'onComplete':completeCallback });
    Ext.fly('upload-form').dom.submit();
    //Ext.fly('submit').dom.disabled   = true;
    Ext.fly('uploadImage').dom.value = '';

    Ext.fly('status').update('Uploading..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
    });
} // doUploadImage

function completeCallback (response) {
    var json = Ext.decode(response);

    Ext.fly('uploadBar').setStyle({  display:'none' });
    Ext.fly('uploadImage').fadeIn();
    //Ext.fly('submit').dom.disabled = false;
    Ext.fly('status').slideOut('t', {
        easing: 'easeOut',
        useDisplay: true
    });

    if (json.status < 0) {
        var err = (json.message) ? json.message : 'Fail upload photo';
        Ext.fly('messageBox').highlight().update(err);
    } else if (json.status == 1) {
        uploadedImage(json.id, json.thumbnail);
    }
} // completeCallback

function uploadedImage (id, thumb) {
    var html;

    html = _template.apply({
        id: id,
        thumb: thumb
    });

    Ext.fly('edit-photo').insertHtml('afterBegin', html);
    Ext.fly('photo-'+id).fadeIn({ easing:'easeOut' });
} // uploadedImage

function deleteImg (id) {
    Ext.fly('photo-'+id).setOpacity(.5).addClass('bgHighlight');
    var answer = confirm(_confirm);

    if (!answer) {
        Ext.fly('photo-'+id).removeClass('bgHighlight').setOpacity(1);
        Ext.fly('delete_'+id).dom.checked = false;
        return;
    }

    Ext.fly('photo-'+id).fadeOut({
        easing: 'easeIn',
        useDisplay: true
    });

    transId = Ext.Ajax.request({
        url: _webroot+'/images/remove',
        method: 'POST',
        params: 'id='+id,
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);

            if (obj.status == true) {
                Ext.fly('photo-'+id).remove();
            } else {
                Ext.fly('delete_'+id).dom.checked = false;
                Ext.fly('photo-'+id).removeClass('bgHighlight').slideIn('t', {
                    easing: 'easeOut',
                    callback: function() {
                        if (obj.error) {
                            Ext.fly('photo-msg-'+id).highlight().update(obj.error);
                        }
                    }
                });
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', 'edit-photo-form'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Deleting..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }
} // deleteImg

function message (msg, focus) {
    alert(msg);

    if (typeof focus != 'undefined') {
        Ext.fly(focus).focus();
    }
} // message

<?php $this->addScript('Ext.onReady(function() { init(); });'); ?>
</script>